<template>
  <view class="container">
    <!-- 设备基础信息卡片 -->
    <view class="info-card">
      <view class="card-header">
        <view class="device-status" :class="'status-' + deviceInfo.status"></view>
        <view class="header-content">
          <text class="device-name">{{ deviceInfo.name }}</text>
          <text class="device-status-text" :class="'text-' + deviceInfo.status">{{ getStatusText(deviceInfo.status) }}</text>
        </view>
      </view>
      
      <view class="info-grid">
        <view class="info-item">
          <text class="info-label">设备编号</text>
          <text class="info-value">{{ deviceInfo.code }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">设备类型</text>
          <text class="info-value">{{ deviceInfo.type }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">物联卡号</text>
          <text class="info-value">{{ deviceInfo.simCard }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">安装区域</text>
          <text class="info-value">{{ deviceInfo.location }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">安装时间</text>
          <text class="info-value">{{ deviceInfo.installTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">最后在线</text>
          <text class="info-value">{{ deviceInfo.lastOnline }}</text>
        </view>
      </view>
    </view>

    <!-- 设备状态信息 -->
    <view class="status-card">
      <view class="section-title">设备状态</view>
      <view class="status-grid">
        <view class="status-item">
          <text class="status-label">容量状态</text>
          <view class="capacity-bar">
            <view class="capacity-fill" :style="{ width: deviceInfo.capacity }"></view>
          </view>
          <text class="capacity-text">{{ deviceInfo.capacity }}</text>
        </view>

      </view>
    </view>

    <!-- 设备控制区域 -->
    <view class="control-card">
      <view class="section-title">设备控制</view>
      
      <!-- 指令显示框 -->
      <view class="command-display" @tap="showCommandHistory">
        <view class="command-header">
          <text class="command-title">指令内容</text>
          <uni-icons type="eye" size="16" class="view-icon"></uni-icons>
        </view>
        <text class="command-text">{{ lastCommand || '暂无指令记录' }}</text>
        <text class="command-time" v-if="lastCommandTime">{{ lastCommandTime }}</text>
      </view>

      <!-- 控制按钮 -->
      <view class="control-buttons">
        <button class="control-btn btn-primary" @tap="sendCommand('open')">
          <uni-icons type="unlock" size="20"></uni-icons>
          <text class="btn-text">开门</text>
        </button>
        <button class="control-btn btn-secondary" @tap="sendCommand('close')">
          <uni-icons type="locked" size="20"></uni-icons>
          <text class="btn-text">关门</text>
        </button>
        <button class="control-btn btn-info" @tap="sendCommand('photo')">
          <uni-icons type="camera" size="20"></uni-icons>
          <text class="btn-text">拍照</text>
        </button>
        <button class="control-btn btn-success" @tap="sendCommand('refresh')">
          <uni-icons type="refresh" size="20"></uni-icons>
          <text class="btn-text">刷新</text>
        </button>
      </view>
    </view>

    <!-- 操作记录 -->
    <view class="history-card">
      <view class="section-title">操作记录</view>
      <view class="history-list">
        <view class="history-item" v-for="record in operationHistory" :key="record.id">
          <view class="history-icon" :class="'icon-' + record.type">
            <uni-icons :type="getHistoryIcon(record.type)" size="16"></uni-icons>
          </view>
          <view class="history-content">
            <text class="history-action">{{ record.action }}</text>
            <text class="history-time">{{ record.time }}</text>
          </view>
          <text class="history-status" :class="'status-' + record.status">{{ record.status === 'success' ? '成功' : '失败' }}</text>
        </view>
      </view>
    </view>

    <!-- 指令历史弹窗 -->
    <uni-popup ref="commandPopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">指令历史</text>
          <uni-icons type="closeempty" size="20" @tap="closeCommandHistory"></uni-icons>
        </view>
        <view class="command-history">
          <view class="command-item" v-for="cmd in commandHistory" :key="cmd.id">
            <text class="cmd-text">{{ cmd.command }}</text>
            <text class="cmd-time">{{ cmd.time }}</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        deviceInfo: {
          id: '',
          name: '',
          code: '',
          type: '智能回收箱',
          simCard: '',
          location: '',
          installTime: '',
          lastOnline: '',
          status: 'normal',
          capacity: '45%',
          signalLevel: 3
        },
        lastCommand: '',
        lastCommandTime: '',
        operationHistory: [
          {
            id: 1,
            type: 'open',
            action: '远程开门',
            time: '2023-09-28 14:30:25',
            status: 'success'
          },
          {
            id: 2,
            type: 'photo',
            action: '设备拍照',
            time: '2023-09-28 14:25:10',
            status: 'success'
          },
          {
            id: 3,
            type: 'refresh',
            action: '状态刷新',
            time: '2023-09-28 14:20:05',
            status: 'success'
          },
          {
            id: 4,
            type: 'close',
            action: '远程关门',
            time: '2023-09-28 14:15:30',
            status: 'failed'
          }
        ],
        commandHistory: [
          {
            id: 1,
            command: 'OPEN_DOOR',
            time: '2023-09-28 14:30:25'
          },
          {
            id: 2,
            command: 'TAKE_PHOTO',
            time: '2023-09-28 14:25:10'
          },
          {
            id: 3,
            command: 'REFRESH_STATUS',
            time: '2023-09-28 14:20:05'
          }
        ]
      }
    },
    onLoad(options) {
      if (options.deviceId) {
        this.loadDeviceInfo(options.deviceId);
      }
    },
    methods: {
      loadDeviceInfo(deviceId) {
        // 模拟加载设备信息
        const deviceData = {
          1: {
            id: '1',
            name: '万达广场 A 区回收箱',
            code: 'RB001',
            type: '智能回收箱 V2.0',
            simCard: '1380013800138001',
            location: '万达广场 A 区 1 楼东侧',
            installTime: '2023-06-15 10:30:00',
            lastOnline: '2 分钟前',
            status: 'normal',
            capacity: '45%',
            signalLevel: 3
          },
          2: {
            id: '2',
            name: '银泰城 B1 层回收箱',
            code: 'RB002',
            type: '智能回收箱 V2.0',
            simCard: '1380013800138002',
            location: '银泰城 B1 层中庭',
            installTime: '2023-07-20 14:20:00',
            lastOnline: '5 分钟前',
            status: 'warning',
            capacity: '95%',
            signalLevel: 2
          }
        };
        
        this.deviceInfo = deviceData[deviceId] || this.deviceInfo;
      },
      getStatusText(status) {
        const statusMap = {
          'normal': '正常',
          'warning': '需清理',
          'fault': '故障',
          'offline': '离线'
        };
        return statusMap[status] || '未知';
      },

      getHistoryIcon(type) {
        const iconMap = {
          'open': 'unlock',
          'close': 'locked',
          'photo': 'camera',
          'refresh': 'refresh'
        };
        return iconMap[type] || 'gear';
      },
      sendCommand(type) {
        const commandMap = {
          'open': 'OPEN_DOOR',
          'close': 'CLOSE_DOOR',
          'photo': 'TAKE_PHOTO',
          'refresh': 'REFRESH_STATUS'
        };
        
        const actionMap = {
          'open': '远程开门',
          'close': '远程关门',
          'photo': '设备拍照',
          'refresh': '状态刷新'
        };
        
        const command = commandMap[type];
        const action = actionMap[type];
        const now = new Date();
        const timeStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
        
        // 更新最后指令
        this.lastCommand = command;
        this.lastCommandTime = timeStr;
        
        // 添加到指令历史
        this.commandHistory.unshift({
          id: Date.now(),
          command: command,
          time: timeStr
        });
        
        // 添加到操作记录
        this.operationHistory.unshift({
          id: Date.now(),
          type: type,
          action: action,
          time: timeStr,
          status: 'success'
        });
        
        uni.showToast({
          title: `${action}指令已发送`,
          icon: 'success'
        });
      },
      showCommandHistory() {
        this.$refs.commandPopup.open();
      },
      closeCommandHistory() {
        this.$refs.commandPopup.close();
      }
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 16px;
    padding-bottom: 80px;
    box-sizing: border-box;
  }

  /* 信息卡片 */
  .info-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
  }

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }

  .device-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 12px;
  }

  .status-normal {
    background-color: #52C41A;
  }

  .status-warning {
    background-color: #FAAD14;
  }

  .status-fault {
    background-color: #F5222D;
  }

  .status-offline {
    background-color: #8C8C8C;
  }

  .header-content {
    flex: 1;
  }

  .device-name {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 4px;
  }

  .device-status-text {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
  }

  .text-normal {
    background-color: #F6FFED;
    color: #52C41A;
  }

  .text-warning {
    background-color: #FFFBE6;
    color: #FAAD14;
  }

  .text-fault {
    background-color: #FFF2F0;
    color: #F5222D;
  }

  .text-offline {
    background-color: #F5F5F5;
    color: #8C8C8C;
  }

  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .info-item {
    display: flex;
    flex-direction: column;
  }

  .info-label {
    font-size: 12px;
    color: #999999;
    margin-bottom: 4px;
  }

  .info-value {
    font-size: 14px;
    color: #333333;
    font-weight: 500;
  }

  /* 状态卡片 */
  .status-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 16px;
  }

  .status-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .status-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .status-label {
    font-size: 14px;
    color: #666666;
    width: 60px;
    flex-shrink: 0;
  }

  .capacity-bar {
    flex: 1;
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
  }

  .capacity-fill {
    height: 100%;
    background-color: #1AAD19;
    transition: width 0.3s ease;
  }

  .capacity-text {
    font-size: 12px;
    color: #666666;
    width: 40px;
    text-align: right;
  }

  /* 控制卡片 */
  .control-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
  }

  .command-display {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid #e9ecef;
  }

  .command-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .command-title {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }

  .view-icon {
    color: #666666;
  }

  .command-text {
    display: block;
    font-size: 14px;
    color: #666666;
    font-family: monospace;
    margin-bottom: 4px;
  }

  .command-time {
    font-size: 12px;
    color: #999999;
  }

  .control-buttons {
    display: flex;
    gap: 8px;
    margin-top: 16px;
  }

  .control-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    border-radius: 10px;
    border: none;
    color: #ffffff;
    font-size: 14px;
    gap: 4px;
    min-height: 50px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .control-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
  }

  .control-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }

  .btn-primary {
    background: linear-gradient(135deg, #1AAD19 0%, #16A085 100%);
  }

  .btn-primary:active {
    background: linear-gradient(135deg, #16A085 0%, #1AAD19 100%);
  }

  .btn-secondary {
    background: linear-gradient(135deg, #6C757D 0%, #5A6268 100%);
  }

  .btn-secondary:active {
    background: linear-gradient(135deg, #5A6268 0%, #6C757D 100%);
  }

  .btn-info {
    background: linear-gradient(135deg, #17A2B8 0%, #138496 100%);
  }

  .btn-info:active {
    background: linear-gradient(135deg, #138496 0%, #17A2B8 100%);
  }

  .btn-success {
    background: linear-gradient(135deg, #28A745 0%, #20C997 100%);
  }

  .btn-success:active {
    background: linear-gradient(135deg, #20C997 0%, #28A745 100%);
  }

  .btn-text {
    font-size: 11px;
    color: #ffffff;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
  }

  /* 历史记录卡片 */
  .history-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
  }

  .history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .history-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }

  .history-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: #ffffff;
  }

  .icon-open {
    background-color: #1AAD19;
  }

  .icon-close {
    background-color: #6C757D;
  }

  .icon-photo {
    background-color: #17A2B8;
  }

  .icon-refresh {
    background-color: #28A745;
  }

  .history-content {
    flex: 1;
  }

  .history-action {
    display: block;
    font-size: 14px;
    color: #333333;
    margin-bottom: 4px;
  }

  .history-time {
    font-size: 12px;
    color: #999999;
  }

  .history-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
  }

  .status-success {
    background-color: #F6FFED;
    color: #52C41A;
  }

  .status-failed {
    background-color: #FFF2F0;
    color: #F5222D;
  }

  /* 弹窗样式 */
  .popup-content {
    background-color: #ffffff;
    border-radius: 12px 12px 0 0;
    padding: 20px;
    max-height: 60vh;
  }

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
  }

  .popup-title {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }

  .command-history {
    max-height: 40vh;
    overflow-y: auto;
  }

  .command-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .cmd-text {
    font-size: 14px;
    color: #333333;
    font-family: monospace;
  }

  .cmd-time {
    font-size: 12px;
    color: #999999;
  }
</style>